<!DOCTYPE html>

<html>
	<head>
		<style type="text/css" media="screen">
			body {
				font-size: 14px;
				font-family: "Trebuchet MS", "Helvetica", "Arial",  "Verdana", "sans-serif";
			}
	
			#test {
				width: 200px;
				height: 200px;
				position: absolute;
				top: 100px;
				left: 50px;
			}
			
			.nokia-shadow {
				position: absolute;
				display: none;
			}
			
			.nokia-shadow * {
				border: 0;
				margin: 0;
				padding: 0;
				clear: none;
			}
			
			.nokia-shadow .nokia-shadow-top, .nokia-shadow .nokia-shadow-bottom {
				height: 6px;
				width: 100%;
				overflow: hidden;
			}
			
			.nokia-shadow .nokia-shadow-tl, .nokia-shadow .nokia-shadow-tr, .nokia-shadow .nokia-shadow-bl, .nokia-shadow .nokia-shadow-br {
				float: left;
				height: 6px;
				width: 6px;
			}
			
			.nokia-shadow .nokia-shadow-tl {
				background: transparent url(../themes/nokia/images/shadow.png) no-repeat scroll 0 0;
			}
			
			.nokia-shadow .nokia-shadow-tc {
				background: transparent url(../themes/nokia/images/shadow.png) repeat-x scroll 0 -30px;
			}
			
			.nokia-shadow .nokia-shadow-tr {
				background: transparent url(../themes/nokia/images/shadow.png) no-repeat scroll 0 -18px;
			}
			.nokia-shadow .nokia-shadow-bl {
				background: transparent url(../themes/nokia/images/shadow.png) no-repeat scroll 0 -12px;
			}
			
			.nokia-shadow .nokia-shadow-bc {
				background: transparent url(../themes/nokia/images/shadow.png) repeat-x scroll 0 -36px;
			}
			
			.nokia-shadow .nokia-shadow-br {
				background: transparent url(../themes/nokia/images/shadow.png) no-repeat scroll 0 -6px;
			}
			
			.nokia-shadow .nokia-shadow-middle {
				width: 100%;
			}
			
			.nokia-shadow .nokia-shadow-ml, .nokia-shadow .nokia-shadow-mr {
				float: left;
				height: 100%;
				width: 6px;
			}
			
			.nokia-shadow .nokia-shadow-bc, .nokia-shadow .nokia-shadow-tc {
				height: 6px;
				float: left;
			}
			
			.nokia-shadow .nokia-shadow-ml {
				background: transparent url(../themes/nokia/images/shadow-lr.png) repeat-y scroll 0 0;
			}
			
			.nokia-shadow .nokia-shadow-mc {
				background: transparent url(../themes/nokia/images/shadow-c.png) repeat scroll 0 0;
				float: left;
				height: 100%;
			}
			
			.nokia-shadow .nokia-shadow-mr {
				background: transparent url(../themes/nokia/images/shadow-lr.png) repeat-y scroll -6px 0;
			}
			
		</style>
		
		<link rel="stylesheet" href="../themes/nokia/base.css" type="text/css" media="screen" title="no title" charset="utf-8">
		<link rel="stylesheet" href="../themes/custom-theme/ui.all.css" type="text/css" media="screen" title="no title" charset="utf-8">
	
		<script src="../lib/jquery/jquery.js" type="text/javascript" charset="utf-8"></script>
		<script src="../lib/jquery/jquery.scrollTo.js" type="text/javascript" charset="utf-8"></script>
	
		<script src="../src/core.js" type="text/javascript" charset="utf-8"></script>
		<script src="../src/util.js" type="text/javascript" charset="utf-8"></script>
		<script src="../src/widget.js" type="text/javascript" charset="utf-8"></script>
		<script src="drag.js" type="text/javascript" charset="utf-8"></script>
	</head>
	
	<body>
		
		<br /><br />
		
		<button id="toggle">
			Shadow
		</button>
	
		<div id="test" class="ui-widget-header ui-corner-all">
			Shadow
		</div>
		
		<script type="text/javascript" charset="utf-8">
		
			jQuery(document).ready(function() {
		
				jQuery('#toggle').click(function() {
					Nokia.util.shadow('#test');
				});
				
			});
		
		</script>
	
	</body>
</html>